<template>
  <view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
	  <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
		  <view class="ss-flex ss-col-center">
			  <view class="line"></view>
			  <view class="title ss-m-l-20 ss-m-r-10">商品详情</view>
		  </view>
		  <view
				  class="ss-flex ss-col-center"
		  >
			  <button v-if="state.view === 'source'" @tap="onTranslate" class="ss-reset-button more-btn">显示译文</button>
			  <button v-if="state.view === 'target'" @tap="onReset" class="ss-reset-button more-btn">显示原文</button>
		  </view>
	  </view>
    <view v-if="props.type == 'text'" class="card-content" @click="sheep.$helper.copyText(props.content);">
	    <!--<view style="margin-bottom: 30rpx">
		    <button v-if="state.view === 'source'" style="width: 120rpx; padding: 5rpx; color: #FFFFFF; background: #459cff" class="ss-reset-button ui-Shadow-Main" @tap="onTranslate">显示</button>
		    <button v-if="state.view === 'target'" style="width: 120rpx; padding: 5rpx; color: #FFFFFF; background: #008232" class="ss-reset-button ui-Shadow-Main" @tap="onReset">显示原文</button>
	    </view>-->
	    <text v-if="state.view === 'source'" class="content">
		    {{props.content}}
	    </text>
	    <text v-if="state.view === 'target'" class="content">
		    {{state.chinese}}
      </text>
	    <span style="
									font-weight: 400;
									text-decoration-line: underline;
									color: rgba(111, 170, 247, 1);
									text-align: left;
									margin-left: 10rpx;
									vertical-align: top;">
									点击复制</span>
      <!--<mp-html v-if="state.view === 'source'" :content="content"></mp-html>
      <mp-html v-if="state.view === 'target'" :content="state.chinese"></mp-html>-->
    </view>
	  <view v-if="props.type == 'html'" class="card-content" @click="sheep.$helper.copyText(props.content);">
		  <mp-html v-if="state.view === 'source'" :content="content"></mp-html>
		  <mp-html v-if="state.view === 'target'" :content="state.chinese"></mp-html>
		  <span style="
									font-weight: 400;
									text-decoration-line: underline;
									color: rgba(111, 170, 247, 1);
									text-align: left;
									margin-left: 10rpx;
									vertical-align: top;">
									点击复制</span>
	  </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import {reactive} from "vue";
  const { safeAreaInsets } = sheep.$platform.device;

  const props = defineProps({
    content: {
      type: String,
      default: '',
    },
	  type: {
			type: String,
		  default: 'text'
	  }
  });

	const state = reactive({
		chinese: '',
		view: 'source'
	})

	function onTranslate() {
		if (state.chinese) {
			state.view = 'target'
			return
		}
		// 加载提示
		sheep.$helper.toast('正在翻译');
		sheep.$api.goods.translate({
			content: props.content
		}).then(res => {
			state.chinese = res;
			state.view = 'target'
		})
	}

	function onReset() {
		state.view = 'source'
	}
</script>

<style lang="scss" scoped>
  .detail-content-card {
	  margin-top: 30rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	  box-shadow: 1px 1px 50px #dadada;

	  padding: 30rpx;

	  /* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	  background-size: 100% 10% !important;
	  background-repeat: no-repeat;

    .card-header {
      .line {
        width: 6rpx;
        height: 30rpx;
        background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
        border-radius: 3rpx;
      }

      .title {
        font-size: 30rpx;
        font-weight: bold;
      }

      .des {
        font-size: 24rpx;
        color: $dark-9;
      }

      .more-btn {
        font-size: 24rpx;
        color: var(--ui-BG-Main);
      }

	    .content {
		    white-space: pre-wrap; // 保持文本的格式并允许自动换行
		    word-wrap: break-word; // 长单词或URL内部断行，防止溢出
		    overflow-wrap: break-word; // 提高兼容性
	    }
    }
  }
</style>
